<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>结算单明细管理</title>
    <#include "/common/link.ftl">

</head>
<body class="hold-transition skin-black sidebar-mini">
<div class="wrapper">
    <#include "/common/navbar.ftl">
    <!--菜单回显-->
    <#assign currentMenu="consumption"/>
    <#include "/common/menu.ftl">
    <form class="box-body" class="form-horizontal" id="editForm" action="/consumption/saveOrUpdate" method="post" >
    <div class="content-wrapper">
        <section class="content-header">
            <h1>结算单明细</h1>
        </section>
        <section class="content">
            <div class="box" style="padding: 10px;">
                <div class="box" style="border-top: none;">
                    <div class="box-header with-border">
                        <h3 class="box-title"><span class="glyphicon glyphicon-triangle-right"></span> 结算单明细</h3>
                    </div>
                    <div class="box-body no-padding">
                        <div class="mailbox-controls">
                            <div class="btn-group">
                                <#-- 新增 -->
                                <button type="button" class="btn btn-default btn-sm checkbox-toggle btn-input btninput"><i class="fa fa-plus"></i></button>
                                <#-- 删除 -->
                                <button type="button" class="btn btn-default btn-sm btndelete"><i class="fa fa-trash-o"></i></button>
                            </div>
                        </div>
                        <div class="table-responsive mailbox-messages">

                            <table class="table table-hover table-striped">
                                <thead>
                                    <tr>
                                        <th><input type="checkbox"></th>
                                        <th>业务大类</th>
                                        <th>业务小类</th>
                                        <th>结算类型</th>
                                        <th>消费金额(元)</th>
                                        <th>优惠金额(元)</th>
                                        <th>实收金额(元)</th>
                                    </tr>
                                </thead>

                                <tbody id="titembody">
                                    <#list consumptionItems as tmp>
                                        <tr>
                                            <td><input  class='itemdeletecbclass' type="checkbox"></td>

                                            <td value="${tmp.category.id}">${tmp.category.title}</td>
                                            <input type="hidden" name="category_id" value="${tmp.category.id}">
                                            <td value="${tmp.category_item.id}">${tmp.category_item.title}</td>
                                            <input type="hidden" name="category_item_id" value="${tmp.category_item.id}">
                                            <td value="${tmp.pay_type.id}">${tmp.pay_type.title}</td>
                                            <input type="hidden" name="pay_type_id" value="${tmp.pay_type.id}">
                                            <td value="${tmp.amount?c}" class='amount_class'>${tmp.amount?c}</td>
                                            <input type="hidden" name="amount1" value="${tmp.amount?c}">
                                            <td value="${tmp.discount_amount?c}" class='discountAmountClass'>${tmp.discount_amount?c}</td>
                                            <input type="hidden" name="discount_amount1" value="${tmp.discount_amount?c}">
                                            <td value="${tmp.pay_amount?c}" class='payAmountClass'>${tmp.pay_amount?c}</td>
                                            <input type="hidden" name="pay_amount1" value="${tmp.pay_amount?c}">
                                        </tr>
                                    </#list>
                                <script>
                                    $(function (){
                                        fn();
                                    });
                                </script>
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th>总消费金额:<span id="amountspan">0</span>元</th>
                                        <th>总优惠金额:<span id="disaccountamountspan">0</span>元</th>
                                        <th>总实收金额:<span id="abc">0</span>元</th>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
                <br/>

				    <div class="box" style="border-top: none;">
                    <div class="box-header with-border">
                        <h3 class="box-title"><span class="glyphicon glyphicon-triangle-right"></span> 结算单信息</h3>
                    </div>

                        <input type="hidden" name="id" value="${currentConsumption.id}" >
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>客户名称：</label>
                                    <input type="text" name="customer_name" value="${currentConsumption.customer_name}" class="form-control" placeholder="请输入客户名称">
                                </div>
                                <div class="form-group">
                                    <label>客户电话：</label>
                                    <input type="text" class="form-control" name="customer_tel" value="${currentConsumption.customer_tel}" placeholder="请输入客户电话">
                                </div>
                                <div class="form-group">
                                    <label>消费门店：</label>
                                    <select class="form-control" name="business.id" id="businessid1">
                                        <option value="">请选择门店</option>
                                        <#list businesses as b>
                                            <option value="${b.id}">${b.name}</option>
                                        </#list>
                                    </select>
                                    <script>
                                        $("#businessid1").val(${currentConsumption.business.id})
                                    </script>
                                </div>
                                <div class="form-group">
                                    <label>进店时间：</label>
                                    <input type="text" class="form-control input-date" name="checkin_time" value="${(currentConsumption.checkin_time?string('yyyy-MM-dd HH:mm'))!}">
                                </div>
                                <div class="form-group">
                                    <label>离店时间：</label>
                                    <input type="text" class="form-control input-date" name="checkout_time" value="${(currentConsumption.checkout_time?string('yyyy-MM-dd HH:mm'))!}">
                                </div>
                                <div class="form-group">
                                    <label>车牌记录：</label>
                                    <input type="text" class="form-control" placeholder="请输入车牌记录" name="car_licence" value="${currentConsumption.car_licence}">
                                </div>
                                <div class="form-group">
                                    <label>车型记录：</label>
                                    <input type="text" class="form-control" placeholder="请输入车型记录" name="car_type" value="${currentConsumption.car_type}">
                                </div>

                                <div class="form-group">
                                    <label>结算单备注：</label>
                                    <textarea class="form-control"  rows="4" name="info"
                                              placeholder="请输入结算单备注">${currentConsumption.info}</textarea>
                                </div>
                                <div class="form-group">
                                    <label>结算单状态：</label>
                                    <input type="text" class="form-control"  readonly value="${currentConsumption.statusName}">
                                    <input type="hidden" name="status" value="${currentConsumption.status}">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>总消费金额(元)：</label>
                                    <input type="text" class="form-control" placeholder="请输入总消费金额" name="total_amount" value="${(totalAmount?c)!}">
                                </div>
                                <div class="form-group">
                                    <label>优惠金额(元)：</label>
                                    <input type="text" class="form-control" placeholder="请输入优惠金额" name="discount_amount" value="${(totalDiscountAmount?c)!}">
                                </div>
                                <div class="form-group">
                                    <label>实收金额(元)：</label>
                                    <input type="text" class="form-control" placeholder="请输入实收金额" name="pay_amount" value="${((totalAmount-totalDiscountAmount)?c)!}">
                                </div>
                                    <div class="form-group">
                                        <label>结算单流水号：</label>
                                        <input type="text" name="cno" class="form-control" readonly  value="${currentConsumption.cno}">
                                    </div>
                                    <div class="form-group">
                                        <label>关联预约单流水号：</label>
                                        <input name="appointment_ano" type="text" class="form-control" readonly  value="${currentConsumption.appointment_ano}">
                                    </div>
                                    <div class="form-group">
                                        <label>创建时间：</label>
                                        <input name="create_time" type="text" class="form-control" readonly  value="${(currentConsumption.create_time?string('yyyy-MM-dd HH:mm:ss'))!}">
                                    </div>
                                    <div class="form-group">
                                        <label>结算时间：</label>
                                        <input name="pay_time" type="text" readonly class="form-control" readonly  value="${(currentConsumption.pay_time?string('yyyy-MM-dd HH:mm:ss'))!}"/>
                                    </div>
                                    <div class="form-group">
                                        <label>结算人：</label>
                                        <input type="text" class="form-control" readonly  value="${currentConsumption.payee.name}">
                                        <input type="hidden" name="payee.id" value="${currentConsumption.payee.id}">
                                    </div>
                                    <div class="form-group">
                                        <label>审核时间：</label>
                                        <input name="audit_time" type="text" class="form-control" readonly  value="${(currentConsumption.audit_time?string('yyyy-MM-dd HH:mm:ss'))!}">
                                    </div>
                                    <div class="form-group">
                                        <label>审核人：</label>
                                        <input type="text" class="form-control" readonly  value="${currentConsumption.auditor.name}">
                                        <input type="hidden" name="auditor.id" value="${currentConsumption.auditor.id}">
                                    </div>
                            </div>
                        </div>
                        <script>
                            $('.input-date').datetimepicker({
                                //设置格式
                                format:'yyyy-mm-dd HH:mm:ss',
                                language:'zh-CN',
                                autoclose:true,//选择完关闭
                                minView:2,//精度到那位
                                showMeridian:true
                            })
                        </script>
                        <div class="pull-right">
                            <button type="submit" class="btn btn-primary btn-submit"><span class="glyphicon glyphicon-book"></span> 保存</button>
                            <button type="button" class="btn btn-warning btn-consume"><span class="glyphicon glyphicon-yen"></span> 结算</button>
                            <button type="button" class="btn btn-success btn-audit"><span class="glyphicon glyphicon-flag"></span> 审核</button>
							<button type="button" class="btn btn-danger btn-delete"><span class="glyphicon glyphicon-trash"></span> 删除</button>
                            <a href="javascript:window.history.back()" class="btn btn-danger">后退</a>
                        </div>


                </div>

            </div>
        </section>
    </div>
    </form>
    <#include "/common/footer.ftl">
</div>

<!--模态框-->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">新增结算明细</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="consumptionItemForm" action="/consumption/saveOrUpdate" method="post" >
                <#-- 结算单流水号 -->
                <input type="hidden" name="cno" value="${consumption.cno}">
                <div class="modal-body">
                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label">业务大类：</label>
                        <div class="col-sm-7">
                            <select class="form-control" id="category" name="category.id">
                                <option value="">请选择业务大类</option>
                                <#list yewudalei as tmp>
                                    <option value="${tmp.id}">${tmp.title}</option>
                                </#list>
                            </select>
                            <script>
                                // $("#category").val(2);
                            </script>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label">业务小类：</label>
                        <div class="col-sm-7">
                            <select class="form-control" id="categoryItem" name="categoryItem.id">
                                <option value="">请选择业务小类</option>
                                <#list yewuxiaolei as tmp>
                                    <option value="${tmp.id}">${tmp.title}</option>
                                </#list>
                            </select>
                            <script>
                                // $("#categoryItem").val(15);
                            </script>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label">结算类型：</label>
                        <div class="col-sm-7">
                            <select class="form-control" id="payType" name="payType.id">
                                <option value="">请选择结算类型</option>
                                <#list zhifuleixing as tmp>
                                    <option value="${tmp.id}">${tmp.title}</option>
                                </#list>
                            </select>
                            <script>
                                // $("#payType").val(12);
                            </script>
                        </div>
                    </div>

                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label">消费金额(元)：</label>
                        <div class="col-sm-7">
                            <input type="number" class="form-control" name="amount" id="amount"
                                   placeholder="请输入应收金额">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label">优惠金额(元)：</label>
                        <div class="col-sm-7">
                            <input type="number" class="form-control" name="discountAmount" id="discountAmount"
                                      placeholder="请输入优惠金额">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-3 col-form-label">实收金额(元)：</label>
                        <div class="col-sm-7">
                            <input type="number" class="form-control" name="payAmount" id="payAmount"
                                   placeholder="请输入实收金额">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary btn-submit btnsubmit">保存</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    $(".btninput").click(function (){
        $("#editModal").modal("show");
    });
    $("#discountAmount,#amount").change(function (){
        var discountAmount  = $("#discountAmount").val();
        var amount = $("#amount").val();
        $("#payAmount").val(amount-discountAmount);

    });

    $(".btnsubmit").click(function (){

        //获取模态框中表单的数据
        var category_val = $("#category option:selected").val();
        var category_html = $("#category option:selected").html();

        var categoryItem_val = $("#categoryItem option:selected").val();
        var categoryItem_html = $("#categoryItem option:selected").html();

        var payType_val = $("#payType option:selected").val();
        var payType_html = $("#payType option:selected").html();

        var amount = $("#amount").val();
        var discountAmount = $("#discountAmount").val();
        var payAmount = $("#payAmount").val();



        //利用模态框表单数据生成tr对象
        var trstr = "<tr>" +
            "<td><input class='itemdeletecbclass' type='checkbox'></td>" +
            "<td value='"+category_val+"'>"+category_html+"</td>" +
            '<input type="hidden" name="category_id" value="'+category_val+'">'+
            "<td value='"+categoryItem_val+"'>"+categoryItem_html+"</td>" +
            '<input type="hidden" name="category_item_id" value="'+categoryItem_val+'">'+
            "<td value='"+payType_val+"'>"+payType_html+"</td>" +
            '<input type="hidden" name="pay_type_id" value="'+payType_val+'">'+
            "<td class='amount_class' value='"+amount+"'>"+amount+"</td>" +
            '<input type="hidden" name="amount1" value="'+amount+'">'+
            "<td class='discountAmountClass' value='"+discountAmount+"'>"+discountAmount+"</td>" +
            '<input type="hidden" name="discount_amount1" value="'+discountAmount+'">'+
            "<td class='payAmountClass' value='"+payAmount+"'>"+payAmount+"</td>" +
            '<input type="hidden" name="pay_amount1" value="'+payAmount+'">'+
            "</tr>";

        var tr = $(trstr);

        //将tr对象添加到页面中
        $("#titembody").append(tr);

        //关闭模态框
        $("#editModal").modal("hide");
        //清空模态框数据
        $("#consumptionItemForm")[0].reset();

    });

    var fn = function (){

        var tds = $(".amount_class");
        var amount_num = 0;
        for(var i=0; i<tds.size(); i++){
            amount_num += parseInt($(tds[i]).attr("value"));
        }
        $("#amountspan").html(amount_num);
        $("#amountspan").attr("value", amount_num);
        $("input[name=total_amount]").val(amount_num);

        tds = $(".discountAmountClass");
        var discountNum = 0;
        for(var i=0; i<tds.size(); i++){
            discountNum += parseInt($(tds[i]).attr("value"));
        }
        $("#disaccountamountspan").html(discountNum);
        $("#disaccountamountspan").attr("value", discountNum);
        $("input[name=discount_amount]").val(discountNum);

        tds = $(".payAmountClass");
        var payaccountnum = 0;
        for(var i=0; i<tds.size(); i++){
            payaccountnum += parseInt($(tds[i]).attr("value"));
        }
        $("#abc").html(payaccountnum);
        $("#abc").attr("value", payaccountnum);
        $("input[name=pay_amount]").val(payaccountnum);
    };

    $(".btnsubmit").click(fn);



    //删除代码
    $(".btndelete").click(function (){
        $(".itemdeletecbclass:checked").parent().parent().remove();
        fn();
    });

</script>

</body>
</html>

